<template>
	<view class="integral">
		<!-- 个人信息 -->
		<view class="bg-view">
			<view class="bg_box">
			<!-- 顶部状态栏 -->
			<view class="top-nav" :style="'height:' + (titleBarHeight+titleBarHeight) + 'px;position:fixed;top:0;width:100vw;'">
				<view class="status_nav" :style="'height:' + statusBarHeight + 'px;position:fixed;top:0;width:100vw;'"></view>
				<view :style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+ statusBarHeight +'px;position:fixed;width:100vw;'" class="Index_tab_top">
					<!-- <view class="mine-txt">下楼休闲吧</view> -->
					<image src="../../static/jf/img9.png" mode="widthFix" class="img"></image>
				</view>
			</view>
			<view :style="'width: 100vw;height:'+(titleBarHeight+titleBarHeight)+'px;'"></view>
			
			<!-- 积分换壕礼 -->
			<view class="title_one">
				<view class="left">
					<image src="../../static/jf/img2.png" mode="widthFix" class="img"></image>
					<view class="view1">
						积分商城，重磅上线
					</view>
				</view>
				<view class="right">
					<image src="../../static/jf/img1.png" mode="widthFix" class="img"></image>
				</view>
			</view>
			<view class="title_two">
				<view class="top">
					<view class="top_left">
						你当前可用积分
					</view>
					<view class="top_right" @click="jumpDetilInt()">
						积分明细 >
					</view>
				</view>
				<view class="bottom">
					<view class="b_left">
						<view class="view1">
							{{points}}
						</view>
						<image src="../../static/jf/img3.png" mode="widthFix" class="img"></image>
					</view>
					<view class="b_right" @click="JumpPage">积分规则</view>
				</view>
			</view>
			</view>
		</view>
		
		<!-- 积分礼品 -->
		<view class="main1">
			<view class="title">
					 <view :class="navIndex==index?'item_active':'item'" v-for="(item,index) in categorys" :key="index" @click="navClick(index,item.id)">{{item.name}}</view>
			</view>
			<view class="content">
				<view class="item" v-for="item in orderList" @click="jumpDetil(item.id)">
					<view class="top">
						<image :src="item.publicImgs[0]" mode="aspectFill" class="img"></image>
					</view>
					<view class="bottom">
						<view class="bottom_box">
							<view class="view1">
								{{item.name}}
							</view>
							<view class="view2">
								<view class="view2_left">
									{{item.points}}
								</view>
								<view class="view2_right">
									积分
								</view>
							</view>
							<view class="view3">
								市场价 {{item.price/100}} 元
							</view>
							<view class="dw">
								兑换
							</view>
						</view>
					</view>
				</view>
			<view class="isBottom" v-if="isLastPage">
				更多优质商品，即将上线
			</view>	
			</view>
		</view>
		<customTabbar :bottomTabbar='bottomTabbar' :saleView='mineInfo.saleView' :curNav="1"></customTabbar>
	</view>
</template>

<script>
	var app = getApp();
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import { pointsMall,pointsProductList } from '../../apis/integral.js';
	export default {
		data() {
			return {
				mineInfo: {},
				statusBarHeight :0,
				titleBarHeight : 0,
				bottomTabbar :0,
				navList:['百货','打球','看看'],
				navIndex:0,
				
				
				
				categorys:[],//	类型
				points:'',//当前积分
				
				productP:{
					page:1,
					pageSize:10,
					categoryId:'0'
				},
				isLastPage: false,
				orderList:[],
				
				
			}
		},
		components: {
			customTabbar
		},
		onLoad() {
			
		},
		onReady() {
			uni.hideTabBar();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +uni.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		onShow() {
			uni.hideTabBar();
			let that = this;
			app.isLogin({},function(login){
				that.productP.page = 1;
				that.navIndex=0;
				that.pointsMallData();
				
			})
			app.getUserInfo(function(lRes){
				that.mineInfo = lRes;
			})
		},
		onReachBottom() {
			console.log("cf")
			if(!this.isLastPage){
				this.productP.page++;
				this.getList();
			}
		},
		onPullDownRefresh(){
			let that = this;
			uni.showToast({
				title:'刷新中',
				icon:"loading",
				mask:true
			})
			setTimeout(() => {
				that.productP.page = 1;
				that.isLastPage = false;
				that.getList();
				uni.hideNavigationBarLoading() //完成停止加载
				uni.stopPullDownRefresh() //停止下拉刷新
				uni.hideToast();
			},1500);
		},
		onShareAppMessage: function() {
			// return custom share data when user share.
			return {
				title:'下楼休闲吧，休闲就此刻',
				path:'/pages/integral/integral'
			}
		},
		methods: {
			LoginInvite(login) {
				let that = this;
				let inviteId = null;
				app.isLogin({
					id: inviteId
				}, function(res) {
					that.mineInfo = res;
				});
			},
			JumpPage(){
				let weburl = 'https://p.xiuxian.xialoukeji.com/jfgz.html';
				uni.setStorageSync('webUrl',weburl);
				this.$navTo.navigateTo({
					id:'Home-map',
					url:'/pages/agreement/agreement'
				})
			},
			navClick(index,id){
				this.navIndex=index
				this.productP.page = 1;
				this.productP.categoryId = id;
				this.isLastPage = false;
				this.getList();
			},
			getList(){
				var that = this;
				pointsProductList(this.productP).then(res=>{
					if(that.productP.page == 1 && res.data.data.length<=0){
						that.orderList = null;
						return;
					}
					if(res.data.data.length>0){
						that.orderList = that.productP.page==1?res.data.data:that.orderList.concat(res.data.data);
						that.isLastPage = res.data.is_last_page;
					}
				})
			},
			jumpDetil(id) {
				uni.navigateTo({
					url: `/pageB/goodDetail/goodDetail?id=${id}`
				})
			},
			jumpDetilInt() {
				uni.navigateTo({
					url: `/pageB/intergralDetail/intergralDetail`
				})
			},
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes){
					that.mineInfo = lRes;
					uni.setStorageSync('mineInfo',lRes);
				})
			},
			// 获取商城信息
			pointsMallData(){
				pointsMall().then(res=>{
					let arr=[
						{
							id: "0",
							name: "热抢"
						}
					]
					this.categorys=arr.concat(res.data.categorys)
					this.points=res.data.points
					
					this.productP.categoryId = '0';
					this.getList();
					console.log(this.productP,"this.productP")
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.integral {
		padding-bottom: 230rpx;
	}
	.top-nav {
		background: linear-gradient(180deg, #F77539 0%,rgba(0,0,0,0) 100%);
		position: relative;
		z-index: 5;
		// image {
		// 	width: 100%;
		// 	height: 100%;
		// 	// position: absolute;top: 0;left: 0;
		// 	z-index: -1;
		// }
		.img{
			width: 188rpx;
			height: 36rpx;
		}
	}
/* 背景 */
.bg-view {
	width: 100vw;
	height: 600rpx;
	.bg_box{
		height: 500rpx;
		background: linear-gradient(180deg, #F77539 0%, #FEFDFB 100%);
	}
	// .bg-image {
	// 	z-index: -1;
	// 	display: block;
	// 	width: 100%;
	// 	height: 530rpx;
	// 	position: absolute;
	// 	top: 0;left: 0;
	// }
}

.status_nav {
	width: 100vw;
}
.Index_tab_top {
	font-size: 38rpx;
	font-weight: 500;
	color: #141414;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	.scan-box {
		margin-left: 30rpx;
		width: 160rpx;
		height: 58rpx;
		background: rgba(255,255,255,0.1);
		border-radius: 28rpx;
		border: 1rpx solid #FA6400;
		font-size: 24rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}
	}
	.mine-txt {
		color: #fff;
    font-size: 32rpx;
	}
}

.title_one{
	margin: 40rpx 0 0 24rpx;
	display: flex;
	align-items: center;
	position:relative;
	.left{
		.img{
			width: 320rpx;
		}
		.view1{
			font-weight: 700;
			font-size:32rpx;
			color: #F43B00;
		}
	}
	.right{
		position: absolute;
		right: 0;
		.img{
			width: 410rpx;
		}
	}
}
.title_two{
	margin: 60rpx 24rpx 0;
	position: relative;
	.top{
		height: 88rpx;
		background: #F43B00;
		border-radius: 32rpx 32rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		.top_left{
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.top_right{
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	.bottom{
		height: 121rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		border-radius: 0 0 32rpx 32rpx;
		.b_left{
			display: flex;
			align-items: center;
			.view1{
				font-style: normal;
				font-weight: 700;
				font-size: 64rpx;
				color: #333333;
			}
			.img{
				width: 52rpx;
				height: 52rpx;
				margin-left: 6rpx;
			}
		}
		.b_right{
			width: 144rpx;
			height: 56rpx;
			border: 1rpx solid #EFEFEF;
			border-radius: 200rpx;
			font-weight: 400;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999999;
		}
	}
}

.main1{
	width: 100%;
	.title{
		padding: 0 20rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		.item{
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			margin-right: 50rpx;
		}
		.item_active{
			color: #F43B00;
			font-weight: bold;
			font-size: 28rpx;
			margin-right: 50rpx;
		}
	}
	.content{
		margin: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item{
			width: 346rpx;
			height: 480rpx;
			background: #fff;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			.top{
				width: 100%;
				height: 260rpx;
				border-radius: 30rpx 30rpx 0 0;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 30rpx 30rpx 0 0;
				}
			}
			.bottom{
				.bottom_box{
					padding: 20rpx 20rpx 26rpx;
					position: relative;
					.dw{
						position: absolute;
						right: 20rpx;
						bottom: 30rpx;
						width: 108rpx;
						height: 56rpx;
						background: linear-gradient( 310deg, #F43B00 0%, #FA6D00 100%);
						border-radius: 28rpx;
						font-weight: 600;
						font-size: 26rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.view1{
						font-style: normal;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
					}
					.view2{
						display: flex;
						margin-top: 16rpx;
						.view2_left{
							font-weight: 500;
							font-size: 32rpx;
							color: #F43B00;
						}
						.view2_right{
							font-size: 28rpx;
							color: #F43B00;
						}
					}
					.view3{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;
					}
					
				}
			}
		}
	
	.isBottom{
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
	}
	}
}
</style>
